/**
 * @fileOverview
 * @author iNahoo
 * @since 2018/4/24.
 */
"use strict";

import React, {PureComponent, Component} from 'react';
import ReactDOM from 'react-dom';

const a = 1;

class HelloWorld extends Component {
    constructor(props) {
        super(props);
        this.state = {
            a: 1,
            b: 1,
            c: 1,
        };
    }

    add(key) {
        this.setState(prevState => {
            console.log(prevState);
            return {
                [key]: prevState[key] + 1,
            }
        })
    }

    render() {
        return <div>
            <h1 ref={(dom) => console.log('dom change', dom)}>{a}</h1>
            <h2>{this.state.a}<span onClick={() => this.add('a')}>+</span></h2>
            <h2>{this.state.b}<span onClick={() => this.add('b')}>+</span></h2>
            <h2>{this.state.c}<span onClick={() => this.add('c')}>+</span></h2>
        </div>;
    }
}

ReactDOM.render(
    <HelloWorld></HelloWorld>,
    document.getElementById('app')
);
